<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-size: 16px;
    }

    #box {}

    .foot_nav {
      width: 100%;
      height: .9rem;
      position: fixed;
      bottom: 0;
      left: 0;
    }

    .foot_nav ul {
      display: flex;
      height: .9rem;
    }

    .foot_nav ul li {
      list-style: none;
      text-align: center;
      width: 50%;
      height: .9rem;
      line-height: .9rem;
    }

    .foot_nav ul .active {
      background: red;
    }

    .top_nav {
      width: 100%;
      height: .9rem;

    }

    .top_nav ul {
      list-style: none;
      height: .9rem;
      display: flex;
      justify-content: space-around;
    }

    .top_nav ul li {
      width: 33%;
      height: .9rem;
      line-height: .9rem;
      text-align: center;
    }

    .top_nav ul .active {
      background: palevioletred;
    }

    .list_one {
      height: .9rem;
      line-height: .9rem;
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #e5e5e5;
      margin-top: 10px;
    }

    .list_one img {
      width: .8rem;
      height: .8rem;
    }

    .list_one button {
      width: .7rem;
      height: .7rem;
    }

    .cart_wrap {
      display: none;
    }

    .cart_wrap h1 {
      position: fixed;
      bottom: .9rem;
      left: 0;
      width: 100%;
    }

    .cart_one {
      height: .9rem;
      line-height: .9rem;
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #e5e5e5;
      margin-top: 10px;
    }

    .cart_one img {
      width: .8rem;
      height: .8rem;
    }

    .cart_one button {
      width: .7rem;
      height: .7rem;
      background: green;
    }
  </style>
</head>

<body>
  <div id="wrap">
    <!-- 商品列表部分------------------------------------------------------------ -->
    <div class="index_wrap">
      <div class="top_nav">
        <ul>
          <li class="active" se="s1">冰箱</li>
          <li se="s2">电脑</li>
          <li se="s3">手机</li>
        </ul>
      </div>

      <div class="list">
        <!-- <div class="list_one">
          <img src="./images/bx1.jpg" alt="">
          <span>名称</span>
          <span>价格</span>
          <button>+</button>
        </div> -->
      </div>
    </div>
    <!-- 购物车部分----------------------------------------------- -->
    <div class="cart_wrap">
      <div class="cart_list">
        <!-- <div class="cart_one">
        <img src="./images/bx1.jpg" alt="">
        <span>名称</span>
        <span>价格</span>
        <button>-</button><span>1</span><button>+</button>
      </div> -->
      </div>
      <h2 style="text-align:center;">当前购物车 空空如也！！！！！</h2>
      <h1 style="text-align:center;">当前购物车总价：<span>88888</span></h1>
    </div>

    <!-- 脚步部分-------------------------------------------- -->
    <div class="foot_nav">
      <ul>
        <li class="active">
          <a href="#">首页</a>
        </li>
        <li>
          <a href="#">购物车</a>
        </li>
      </ul>
    </div>
  </div>
</body>
<script src="./javascripts/jquery-3.4.1.min.js"></script>
<script src="./javascripts/index.js"></script>
<script>
  // 响应式布局    1. @media 媒介查询   2. bootstrap 框架 栅格系统 
  // 移动端布局  
  // 百分布局，流式布局，响应式布局, 自适应布局
  // 自适应布局 
  // 主流布局    rem+flex布局  

  // rem适配原理 动态改变html根元素的font-size 来实现对元素的控制
  //  640设计图  
  // 移动端主流设计图   750设计图    

  // rem适配函数
  function Rems() {
    console.log(window.innerWidth)
    var innerWidth = window.innerWidth;
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px"
    if (innerWidth > 750) {
      innerWidth = 750;
      document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px"
    }
  }
  Rems()
  window.onresize = function () { //页面尺寸改变事件
    Rems()
  }
</script>

</html>